{% extends 'migration_app/dashboard_base.html' %}

{% block title %}迁移日志 - Oracle到PolarDB-PG迁移平台{% endblock %}

{% block page_title %}迁移日志{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item active" aria-current="page">迁移日志</li>
{% endblock %}

{% block dashboard_content %}
<div class="row mb-4">
    <div class="col-md-8">
        <form method="get" class="d-flex gap-2">
            <div class="input-group">
                <input type="text" name="search" class="form-control" placeholder="搜索日志内容" value="{{ request.GET.search|default:'' }}">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </div>
            <select name="level" class="form-select" style="width: auto;">
                <option value="">所有级别</option>
                <option value="DEBUG" {% if request.GET.level == 'DEBUG' %}selected{% endif %}>DEBUG</option>
                <option value="INFO" {% if request.GET.level == 'INFO' %}selected{% endif %}>INFO</option>
                <option value="WARNING" {% if request.GET.level == 'WARNING' %}selected{% endif %}>WARNING</option>
                <option value="ERROR" {% if request.GET.level == 'ERROR' %}selected{% endif %}>ERROR</option>
            </select>
            <input type="date" name="date" class="form-control" style="width: auto;" value="{{ request.GET.date|default:'' }}">
        </form>
    </div>
    <div class="col-md-4 text-end">
        <div class="btn-group">
            <button type="button" class="btn btn-success" id="refresh-logs-btn">
                <i class="fas fa-sync"></i> 刷新
            </button>
            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exportLogsModal">
                <i class="fas fa-download"></i> 导出
            </button>
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#clearLogsModal">
                <i class="fas fa-trash"></i> 清理
            </button>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <i class="fas fa-history me-1"></i> 系统日志
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped">
                <thead class="table-light">
                    <tr>
                        <th>时间</th>
                        <th>级别</th>
                        <th>模块</th>
                        <th>消息</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 示例数据，实际应从数据库获取 -->
                    <tr>
                        <td>2024-04-25 12:58:44</td>
                        <td><span class="badge bg-info">INFO</span></td>
                        <td>migration_task</td>
                        <td>开始迁移任务 #1234</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logDetailModal">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>2024-04-25 12:58:42</td>
                        <td><span class="badge bg-warning">WARNING</span></td>
                        <td>database</td>
                        <td>数据库连接超时，正在重试...</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logDetailModal">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>2024-04-25 12:58:40</td>
                        <td><span class="badge bg-danger">ERROR</span></td>
                        <td>schema_sync</td>
                        <td>同步架构失败：权限不足</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logDetailModal">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>2024-04-25 12:58:38</td>
                        <td><span class="badge bg-info">INFO</span></td>
                        <td>user_auth</td>
                        <td>用户 admin 登录成功</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logDetailModal">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <nav aria-label="Page navigation" class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<!-- 日志详情模态框 -->
<div class="modal fade" id="logDetailModal" tabindex="-1" aria-labelledby="logDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logDetailModalLabel">日志详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-3">时间</dt>
                    <dd class="col-sm-9">2024-04-25 12:58:44</dd>
                    
                    <dt class="col-sm-3">级别</dt>
                    <dd class="col-sm-9"><span class="badge bg-info">INFO</span></dd>
                    
                    <dt class="col-sm-3">模块</dt>
                    <dd class="col-sm-9">migration_task</dd>
                    
                    <dt class="col-sm-3">消息</dt>
                    <dd class="col-sm-9">开始迁移任务 #1234</dd>
                    
                    <dt class="col-sm-3">堆栈跟踪</dt>
                    <dd class="col-sm-9">
                        <pre class="bg-light p-3 rounded"><code>File "migration_app/tasks.py", line 123, in start_migration
    task.execute()
File "migration_app/models.py", line 456, in execute
    self.status = 'running'
    self.save()</code></pre>
                    </dd>
                    
                    <dt class="col-sm-3">附加信息</dt>
                    <dd class="col-sm-9">
                        <pre class="bg-light p-3 rounded"><code>{
    "task_id": 1234,
    "source_schema": "HR",
    "target_schema": "hr",
    "tables": ["employees", "departments", "jobs"]
}</code></pre>
                    </dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 导出日志模态框 -->
<div class="modal fade" id="exportLogsModal" tabindex="-1" aria-labelledby="exportLogsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportLogsModalLabel">导出日志</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="export-logs-form">
                    <div class="mb-3">
                        <label for="export_date_range" class="form-label">日期范围</label>
                        <select class="form-select" id="export_date_range" name="date_range">
                            <option value="today">今天</option>
                            <option value="yesterday">昨天</option>
                            <option value="last7days">最近7天</option>
                            <option value="last30days">最近30天</option>
                            <option value="custom">自定义范围</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="export_log_level" class="form-label">日志级别</label>
                        <select class="form-select" id="export_log_level" name="log_level">
                            <option value="all">所有级别</option>
                            <option value="error">仅错误</option>
                            <option value="warning">警告及以上</option>
                            <option value="info">信息及以上</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="export_format" class="form-label">导出格式</label>
                        <select class="form-select" id="export_format" name="format">
                            <option value="csv">CSV</option>
                            <option value="json">JSON</option>
                            <option value="txt">纯文本</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="export-logs-btn">导出</button>
            </div>
        </div>
    </div>
</div>

<!-- 清理日志模态框 -->
<div class="modal fade" id="clearLogsModal" tabindex="-1" aria-labelledby="clearLogsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clearLogsModalLabel">清理日志</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle me-2"></i> 警告：此操作将永久删除选定的日志记录，且无法恢复！
                </div>
                <form id="clear-logs-form">
                    <div class="mb-3">
                        <label for="clear_date_range" class="form-label">清理范围</label>
                        <select class="form-select" id="clear_date_range" name="date_range">
                            <option value="30days">30天前的日志</option>
                            <option value="90days">90天前的日志</option>
                            <option value="180days">180天前的日志</option>
                            <option value="365days">365天前的日志</option>
                            <option value="all">所有日志</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="clear_log_level" class="form-label">日志级别</label>
                        <select class="form-select" id="clear_log_level" name="log_level">
                            <option value="all">所有级别</option>
                            <option value="info">仅信息日志</option>
                            <option value="debug">仅调试日志</option>
                        </select>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="confirm_clear" required>
                        <label class="form-check-label" for="confirm_clear">我确认要删除这些日志记录</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="clear-logs-btn">清理</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 刷新日志
        const refreshBtn = document.getElementById('refresh-logs-btn');
        refreshBtn.addEventListener('click', function() {
            // 显示加载提示
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 刷新中...';
            this.disabled = true;
            
            // 模拟AJAX请求，实际应该调用后端API
            setTimeout(function() {
                // 重新加载页面
                window.location.reload();
            }, 1000);
        });
        
        // 导出日志
        const exportBtn = document.getElementById('export-logs-btn');
        exportBtn.addEventListener('click', function() {
            // 显示加载提示
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 导出中...';
            this.disabled = true;
            
            // 模拟导出过程，实际应该调用后端API
            setTimeout(function() {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('exportLogsModal'));
                modal.hide();
                
                // 提示导出成功
                alert('日志导出成功！');
                
                // 重置按钮
                exportBtn.innerHTML = '导出';
                exportBtn.disabled = false;
            }, 2000);
        });
        
        // 清理日志
        const clearBtn = document.getElementById('clear-logs-btn');
        clearBtn.addEventListener('click', function() {
            const form = document.getElementById('clear-logs-form');
            if (!form.checkValidity()) {
                form.reportValidity();
                return;
            }
            
            // 显示加载提示
            this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 清理中...';
            this.disabled = true;
            
            // 模拟清理过程，实际应该调用后端API
            setTimeout(function() {
                // 关闭模态框
                const modal = bootstrap.Modal.getInstance(document.getElementById('clearLogsModal'));
                modal.hide();
                
                // 提示清理成功
                alert('日志清理成功！');
                
                // 重置按钮和表单
                clearBtn.innerHTML = '清理';
                clearBtn.disabled = false;
                form.reset();
                
                // 重新加载页面
                window.location.reload();
            }, 1500);
        });
    });
</script>
{% endblock %} 